﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>To switch the widget to a right-to-left representation, just enable a single property - "rtl". When this property is on, the horizontal scrollbar is mirrored.</title> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create jqxScrollBar
            
            $("#jqxScrollBar").jqxScrollBar({rtl: true, width: 280, height: 18, min: 0, max: 1000});

            // Trigger the 'valuechanged' event.
            $("#jqxScrollBar").on('valueChanged', function (event) {
                $('#HorizontalDiv').text('Horizontal (' + parseInt(event.currentValue) + ')');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id='HorizontalDiv' style='margin-top: 10px;'>Horizontal</div>
        <div style='margin-top: 10px;' id='jqxScrollBar'>   
        </div>
    </div>
</body>
</html>
